<template>
  <el-container>
    <el-header>
      <el-menu router :default-active="activeIndex" mode="horizontal" @select="menuSelect">
        <el-menu-item id="home" index="home">首页</el-menu-item>
        <el-menu-item id="browser" index="browser">浏览</el-menu-item>
        <el-menu-item id="about" index="about">关于</el-menu-item>
        <li id="searchBox" style="float:right" class="el-menu-item">
          <el-autocomplete class="autocomplete" :trigger-on-focus="false" :fetch-suggestions="querySearchAsync" @select="suggestSelect" v-model="search" placeholder="搜索">
            <i class="el-icon-search" slot="suffix">
            </i>
            <template slot-scope="{ item }">
              <div class="name">
                <img width="30" height="30" :src="item.pic" alt="">
                <span class="title">{{ item.title }}</span>
                <el-badge class="mark" :value="item.score">
                </el-badge>
              </div>
              <span class="addr">发布时间: {{ item.date }}</span>
            </template>
          </el-autocomplete>
        </li>
      </el-menu>
    </el-header>
    <el-main>
      <keep-alive include="home,browser">
        <router-view/>
      </keep-alive>
    </el-main>
    <el-footer height="30px" class="footer">copyright to @Pedro2018</el-footer>
  </el-container>
</template>

<script>
import { searchByKeyword } from './api/elasticApi';
import { mapActions, mapGetters } from 'vuex';
import Driver from 'driver.js';
export default {
  computed: {
    ...mapGetters(['hasHomeJoined'])
  },
  data() {
    return {
      activeIndex: 'home',
      search: ''
    };
  },
  created() {
    this.$nextTick(() => {
      this.driverInit();
    });
  },
  methods: {
    driverInit() {
      if (this.hasHomeJoined) {
        return;
      }
      const driver = new Driver({
        doneBtnText: '完成',
        closeBtnText: '关闭',
        nextBtnText: '下一项',
        prevBtnText: '上一项',
        onHighlighted: el => {
          if (el.popover.options.isLast) {
            this.setHasHomeJoined();
          }
        }
      });
      driver.defineSteps([
        {
          element: '#searchBox',
          popover: {
            title: '搜索栏',
            description: '请在这里搜索菜名，如（豆腐）',
            position: 'bottom'
          }
        },
        {
          element: '#home',
          popover: {
            title: '主页',
            description: '点击进入主页',
            position: 'bottom'
          }
        },
        {
          element: '#browser',
          popover: {
            title: '浏览页',
            description: '点击浏览菜谱',
            position: 'bottom'
          }
        },
        {
          element: '#about',
          popover: {
            title: '关于',
            description: '点击查看项目相关叙述',
            position: 'bottom'
          }
        }
      ]);
      driver.start();
    },
    menuSelect(key, keyPath) {
      // console.log(key, keyPath);
    },
    suggestSelect(item) {
      this.setCurrentCook(item.id);
      this.$router.push({ name: 'detail' });
    },
    querySearchAsync(queryString, cb) {
      if (!queryString || queryString.trim() === '') {
        return;
      }
      searchByKeyword(queryString)
        .then(res => {
          if (res.data.suggest.cook_suggests[0].options.length > 0) {
            /** @type {array} options */
            const options = res.data.suggest.cook_suggests[0].options;
            const results = options.map(option => {
              return {
                score: option['_score'],
                id: option['_id'],
                title: option['_source']['title'],
                pic: option['_source']['pic_url'],
                date: option['_source']['date']
              };
            });
            // console.log(results);
            cb(results);
          } else {
            // eslint-disable-next-line
            cb([]);
          }
        })
        .catch(() => {
          // eslint-disable-next-line
          cb([]);
        });
    },
    ...mapActions(['setCurrentCook', 'setHasHomeJoined'])
  }
};
</script>

<style lang="scss">
.footer {
  border-top-color: bisque;
  position: fixed;
  margin-left: 40%;
  font-size: 1rem;
  bottom: 0;
}
.name {
  display: flex;
  flex: 1;
  text-overflow: ellipsis;
  overflow: hidden;
  .title {
    font-weight: bold;
  }
}
.addr {
  font-size: 12px;
  color: #b4b4b4;
}

.autocomplete {
  input {
    width: 500px;
  }
}
</style>
